<!DOCTYPE html><html lang="zh-Hans"><head><meta charset="utf-8"><title>Angular - Angular 工作区配置</title><meta name="Description" content="Angular is a platform for building mobile and desktop web applications.
    Join the community of millions of developers who build compelling user interfaces with Angular."><base href="/"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="search" type="application/opensearchdescription+xml" href="assets/opensearch.xml"><link rel="icon" type="image/x-icon" href="assets/images/favicons/favicon.ico"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-194x194.png" sizes="194x194"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-16x16.png" sizes="16x16"><link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link href="assets/fonts/Material_Icons.css" rel="stylesheet"><link href="assets/fonts/Droid_Sans_Mono.css" rel="stylesheet"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link rel="manifest" href="pwa-manifest.json"><meta name="theme-color" content="#1976d2"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="translucent"><script async="" src="assets/js/analytics.js"></script><script>!function(e,a,n,t,s,c,g){e.GoogleAnalyticsObject=s,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,c=a.createElement(n),g=a.getElementsByTagName(n)[0],c.async=1,c.src="assets/js/analytics.js",~e.name.indexOf("NG_DEFER_BOOTSTRAP")||g.parentNode.insertBefore(c,g)}(window,document,"script",0,"ga")</script><script>window.onerror=function(){ga("send","exception",{exDescription:function(e,r,n,a,c){var l;e=e.replace(/^Error: /,""),l=c?c.stack.replace(/^Error: /,"").replace(e+"\n","").replace(/^ +/gm,"").replace(/^at /gm,"").replace(/(?: \(|@)http.+\/([^/)]+)\)?(?:\n|$)/gm,"@$1\n").replace(/ *\(eval code(:\d+:\d+)\)(?:\n|$)/gm,"@???$1\n"):r+":"+(n=n||"?")+":"+(a=a||"?");return(e+"\n"+l).substr(0,150)}.apply(null,arguments),exFatal:!0})}</script><link rel="stylesheet" href="styles.4adbe52ad34df01b5273.css"><style>.cdk-high-contrast-active .mat-toolbar{outline:solid 1px}.mat-toolbar-row,.mat-toolbar-single-row{display:flex;box-sizing:border-box;padding:0 16px;width:100%;flex-direction:row;align-items:center;white-space:nowrap}.mat-toolbar-multiple-rows{display:flex;box-sizing:border-box;flex-direction:column;width:100%}.mat-toolbar-multiple-rows{min-height:64px}.mat-toolbar-row,.mat-toolbar-single-row{height:64px}@media(max-width:599px){.mat-toolbar-multiple-rows{min-height:56px}.mat-toolbar-row,.mat-toolbar-single-row{height:56px}}</style><style>.mat-icon{background-repeat:no-repeat;display:inline-block;fill:currentColor;height:24px;width:24px}.mat-icon.mat-icon-inline{font-size:inherit;height:inherit;line-height:inherit;width:inherit}[dir=rtl] .mat-icon-rtl-mirror{transform:scale(-1,1)}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon{display:block}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-icon{margin:auto}</style><style>.mat-button .mat-button-focus-overlay,.mat-icon-button .mat-button-focus-overlay{opacity:0}.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:.04}@media(hover:none){.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:0}}.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-button[disabled],.mat-flat-button[disabled],.mat-icon-button[disabled],.mat-stroked-button[disabled]{cursor:default}.mat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-button.cdk-program-focused .mat-button-focus-overlay,.mat-flat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-flat-button.cdk-program-focused .mat-button-focus-overlay,.mat-icon-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-icon-button.cdk-program-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-raised-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1)}.mat-raised-button::-moz-focus-inner{border:0}.mat-raised-button[disabled]{cursor:default}.mat-raised-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-raised-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-raised-button::-moz-focus-inner{border:0}._mat-animation-noopable.mat-raised-button{transition:none;animation:none}.mat-stroked-button{border:1px solid currentColor;padding:0 15px;line-height:34px}.mat-stroked-button .mat-button-focus-overlay,.mat-stroked-button .mat-button-ripple.mat-ripple{top:-1px;left:-1px;right:-1px;bottom:-1px}.mat-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:56px;height:56px;padding:0;flex-shrink:0}.mat-fab::-moz-focus-inner{border:0}.mat-fab[disabled]{cursor:default}.mat-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-fab{transition:none;animation:none}.mat-fab .mat-button-wrapper{padding:16px 0;display:inline-block;line-height:24px}.mat-mini-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:40px;height:40px;padding:0;flex-shrink:0}.mat-mini-fab::-moz-focus-inner{border:0}.mat-mini-fab[disabled]{cursor:default}.mat-mini-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-mini-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-mini-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-mini-fab{transition:none;animation:none}.mat-mini-fab .mat-button-wrapper{padding:8px 0;display:inline-block;line-height:24px}.mat-icon-button{padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%}.mat-icon-button .mat-icon,.mat-icon-button i{line-height:24px}.mat-button-focus-overlay,.mat-button-ripple.mat-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-button-ripple.mat-ripple:not(:empty){transform:translateZ(0)}.mat-button-focus-overlay{opacity:0;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable .mat-button-focus-overlay{transition:none}.cdk-high-contrast-active .mat-button-focus-overlay{background-color:#fff}.cdk-high-contrast-black-on-white .mat-button-focus-overlay{background-color:#000}.mat-button-ripple-round{border-radius:50%;z-index:1}.mat-button .mat-button-wrapper>*,.mat-fab .mat-button-wrapper>*,.mat-flat-button .mat-button-wrapper>*,.mat-icon-button .mat-button-wrapper>*,.mat-mini-fab .mat-button-wrapper>*,.mat-raised-button .mat-button-wrapper>*,.mat-stroked-button .mat-button-wrapper>*{vertical-align:middle}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button{display:block;font-size:inherit;width:2.5em;height:2.5em}.cdk-high-contrast-active .mat-button,.cdk-high-contrast-active .mat-fab,.cdk-high-contrast-active .mat-flat-button,.cdk-high-contrast-active .mat-icon-button,.cdk-high-contrast-active .mat-mini-fab,.cdk-high-contrast-active .mat-raised-button{outline:solid 1px}</style><style>.mat-drawer-container{position:relative;z-index:1;box-sizing:border-box;-webkit-overflow-scrolling:touch;display:block;overflow:hidden}.mat-drawer-container[fullscreen]{top:0;left:0;right:0;bottom:0;position:absolute}.mat-drawer-container[fullscreen].mat-drawer-container-has-open{overflow:hidden}.mat-drawer-container.mat-drawer-container-explicit-backdrop .mat-drawer-side{z-index:3}.mat-drawer-container.ng-animate-disabled .mat-drawer-backdrop,.mat-drawer-container.ng-animate-disabled .mat-drawer-content,.ng-animate-disabled .mat-drawer-container .mat-drawer-backdrop,.ng-animate-disabled .mat-drawer-container .mat-drawer-content{transition:none}.mat-drawer-backdrop{top:0;left:0;right:0;bottom:0;position:absolute;display:block;z-index:3;visibility:hidden}.mat-drawer-backdrop.mat-drawer-shown{visibility:visible}.mat-drawer-transition .mat-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}.cdk-high-contrast-active .mat-drawer-backdrop{opacity:.5}.mat-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.mat-drawer-transition .mat-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.mat-drawer{position:relative;z-index:4;display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}.cdk-high-contrast-active .mat-drawer,.cdk-high-contrast-active [dir=rtl] .mat-drawer.mat-drawer-end{border-right:solid 1px currentColor}.cdk-high-contrast-active .mat-drawer.mat-drawer-end,.cdk-high-contrast-active [dir=rtl] .mat-drawer{border-left:solid 1px currentColor;border-right:none}.mat-drawer.mat-drawer-side{z-index:2}.mat-drawer.mat-drawer-end{right:0;transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer{transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer.mat-drawer-end{left:0;right:auto;transform:translate3d(-100%,0,0)}.mat-drawer-inner-container{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}.mat-sidenav-fixed{position:fixed}</style><style>.nav-link.highlight[_ngcontent-ng-docs-c30]{color:#ff0}</style><script charset="utf-8" src="toc-toc-module-es2015.f8531f591ee147aebcc6.js"></script><script charset="utf-8" src="default~code-code-example-module~code-code-tabs-module-es2015.9efcc76d2979a2e605e0.js"></script><script charset="utf-8" src="code-code-example-module-es2015.fa05e6f700453813d256.js"></script><style>.mat-progress-bar{display:block;height:4px;overflow:hidden;position:relative;transition:opacity 250ms linear;width:100%}._mat-animation-noopable.mat-progress-bar{transition:none;animation:none}.mat-progress-bar .mat-progress-bar-element,.mat-progress-bar .mat-progress-bar-fill::after{height:100%;position:absolute;width:100%}.mat-progress-bar .mat-progress-bar-background{width:calc(100% + 10px)}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-background{display:none}.mat-progress-bar .mat-progress-bar-buffer{transform-origin:top left;transition:transform 250ms ease}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-buffer{border-top:solid 5px;opacity:.5}.mat-progress-bar .mat-progress-bar-secondary{display:none}.mat-progress-bar .mat-progress-bar-fill{animation:none;transform-origin:top left;transition:transform 250ms ease}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-fill{border-top:solid 4px}.mat-progress-bar .mat-progress-bar-fill::after{animation:none;content:"";display:inline-block;left:0}.mat-progress-bar[dir=rtl],[dir=rtl] .mat-progress-bar{transform:rotateY(180deg)}.mat-progress-bar[mode=query]{transform:rotateZ(180deg)}.mat-progress-bar[mode=query][dir=rtl],[dir=rtl] .mat-progress-bar[mode=query]{transform:rotateZ(180deg) rotateY(180deg)}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-fill,.mat-progress-bar[mode=query] .mat-progress-bar-fill{transition:none}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary,.mat-progress-bar[mode=query] .mat-progress-bar-primary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-translate 2s infinite linear;left:-145.166611%}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-primary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary,.mat-progress-bar[mode=query] .mat-progress-bar-secondary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-translate 2s infinite linear;left:-54.888891%;display:block}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-secondary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=buffer] .mat-progress-bar-background{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-background-scroll 250ms infinite linear;display:block}.mat-progress-bar._mat-animation-noopable .mat-progress-bar-background,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-buffer,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary.mat-progress-bar-fill::after{animation:none;transition:none}@keyframes mat-progress-bar-primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(83.67142%)}100%{transform:translateX(200.611057%)}}@keyframes mat-progress-bar-primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.661479)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translateX(37.651913%)}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translateX(84.386165%)}100%{transform:translateX(160.277782%)}}@keyframes mat-progress-bar-secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:scaleX(.72796)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-background-scroll{to{transform:translateX(-8px)}}</style><script charset="utf-8" src="assets-js-prettify-js-es2015.ba856648f2dd2d930a9b.js"></script></head><body><aio-shell ng-version="9.0.0-rc.11" class="aio-notification-hide folder-guide mode-stable page-guide-workspace-config sidenav-open view-SideNav"><div id="top-of-page"></div><mat-toolbar color="primary" class="mat-toolbar app-toolbar no-print mat-primary mat-toolbar-multiple-rows"><mat-toolbar-row class="mat-toolbar-row notification-container"><aio-notification notificationid="survey-february-2019" expirationdate="2019-03-01" class="ng-tns-c22-0 ng-trigger ng-trigger-hideAnimation" style="height:0"><span class="content ng-tns-c22-0"><a href="http://bit.ly/angular-survey-2019" target="_blank" class="ng-tns-c22-0"><mat-icon role="img" svgicon="insert_comment" aria-label="Announcement" class="mat-icon notranslate icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon><span class="message"><b>填写这份《一分钟调查》</b>，帮我们（开发组）做得更好！</span><span class="action-button">去填写</span></a></span><button mat-icon-button="" aria-label="Close" class="close-button ng-tns-c22-0 mat-icon-button mat-button-base"><span class="mat-button-wrapper"><mat-icon role="img" svgicon="close" aria-label="Dismiss notification" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon></span><div matripple="" class="mat-ripple mat-button-ripple mat-button-ripple-round"></div><div class="mat-button-focus-overlay"></div></button></aio-notification></mat-toolbar-row><mat-toolbar-row class="mat-toolbar-row"><button mat-button="" title="Docs menu" class="hamburger mat-button mat-button-base"><span class="mat-button-wrapper"><mat-icon role="img" svgicon="menu" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></mat-icon></span><div matripple="" class="mat-ripple mat-button-ripple"></div><div class="mat-button-focus-overlay"></div></button><a href="/" class="nav-link home"><img src="assets/images/logos/angular/logo-nav@2x.png" width="150" height="40" title="Home" alt="Home" class="ng-star-inserted"></a><aio-top-menu _nghost-ng-docs-c30="" class="ng-star-inserted"><ul _ngcontent-ng-docs-c30="" role="navigation"><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="features" title="特性" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">特性</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="docs" title="文档" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">文档</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="resources" title="资源" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">资源</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="events" title="会议" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">会议</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="https://blog.wangke.io/" title="译者汪志成的博客，包括翻译文章和原创文章" target="_blank"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">译者博客</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="translations/cn/home" title="关于中文版" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">关于中文版</span></a></li></ul></aio-top-menu><aio-search-box class="search-container"><input type="search" aria-label="search" placeholder="搜索"></aio-search-box><div class="toolbar-external-icons-container"><a href="https://twitter.com/angular" title="Twitter" aria-label="Angular on twitter"><mat-icon role="img" svgicon="logos:twitter" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 50 59" xmlns="http://www.w3.org/2000/svg"><path d="M50,9.3c-1.8,0.8-3.8,1.4-5.9,1.6c2.1-1.3,3.7-3.3,4.5-5.7c-2,1.2-4.2,2-6.5,2.5c-1.9-2-4.5-3.2-7.5-3.2c-5.7,0-10.3,4.6-10.3,10.3c0,0.8,0.1,1.6,0.3,2.3C16.1,16.7,8.5,12.6,3.5,6.4c-0.9,1.5-1.4,3.3-1.4,5.2c0,3.6,1.8,6.7,4.6,8.5C5,20,3.4,19.6,2,18.8c0,0,0,0.1,0,0.1c0,5,3.5,9.1,8.2,10.1c-0.9,0.2-1.8,0.4-2.7,0.4c-0.7,0-1.3-0.1-1.9-0.2c1.3,4.1,5.1,7,9.6,7.1c-3.5,2.8-7.9,4.4-12.7,4.4c-0.8,0-1.6,0-2.4-0.1c4.5,2.9,9.9,4.6,15.7,4.6c18.9,0,29.2-15.6,29.2-29.2c0-0.4,0-0.9,0-1.3C46.9,13.2,48.6,11.4,50,9.3z"></path></svg></mat-icon></a><a href="https://github.com/angular/angular" title="GitHub" aria-label="Angular on github"><mat-icon role="img" svgicon="logos:github" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 51.8 50.4" xmlns="http://www.w3.org/2000/svg"><path d="M25.9,0.2C11.8,0.2,0.3,11.7,0.3,25.8c0,11.3,7.3,20.9,17.5,24.3c1.3,0.2,1.7-0.6,1.7-1.2c0-0.6,0-2.6,0-4.8c-7.1,1.5-8.6-3-8.6-3c-1.2-3-2.8-3.7-2.8-3.7c-2.3-1.6,0.2-1.6,0.2-1.6c2.6,0.2,3.9,2.6,3.9,2.6c2.3,3.9,6,2.8,7.5,2.1c0.2-1.7,0.9-2.8,1.6-3.4c-5.7-0.6-11.7-2.8-11.7-12.7c0-2.8,1-5.1,2.6-6.9c-0.3-0.7-1.1-3.3,0.3-6.8c0,0,2.1-0.7,7,2.6c2-0.6,4.2-0.9,6.4-0.9c2.2,0,4.4,0.3,6.4,0.9c4.9-3.3,7-2.6,7-2.6c1.4,3.5,0.5,6.1,0.3,6.8c1.6,1.8,2.6,4.1,2.6,6.9c0,9.8-6,12-11.7,12.6c0.9,0.8,1.7,2.4,1.7,4.7c0,3.4,0,6.2,0,7c0,0.7,0.5,1.5,1.8,1.2c10.2-3.4,17.5-13,17.5-24.3C51.5,11.7,40.1,0.2,25.9,0.2z"></path></svg></mat-icon></a></div></mat-toolbar-row></mat-toolbar><mat-sidenav-container role="main" class="mat-drawer-container mat-sidenav-container sidenav-container mat-drawer-transition has-floating-toc"><div class="mat-drawer-backdrop ng-star-inserted"></div><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav tabindex="-1" class="mat-drawer mat-sidenav sidenav ng-tns-c18-1 ng-trigger ng-trigger-transform mat-drawer-side ng-star-inserted mat-drawer-opened" style="transform:none;visibility:visible"><div class="mat-drawer-inner-container ng-tns-c18-1"><aio-nav-menu class="ng-tns-c18-1"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="docs" title="Angular 文档简介" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="通过构建第一个 Angular 应用来学习基础知识" aria-pressed="false"><span>快速上手</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start" title="介绍 Angular 的组件模型、模板语法和组件通讯" target="_self"><span>你的第一个应用</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/routing" title="介绍如何使用浏览器的 URL 在组件之间进行路由" target="_self"><span>路由</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/data" title="介绍服务以及如何访问外部数据" target="_self"><span>管理数据</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/forms" title="学习如何使用表单从用户那里获取并管理数据" target="_self"><span>表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/deployment" title="通过你的应用放到 Firebase 或自己的服务器上来把它分享给外界" target="_self"><span>部署</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="guide/setup-local" title="使用 Angular CLI 搭建本地开发环境简介" target="_self"><span>搭建环境</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 的基本原理" aria-pressed="false"><span>基本原理</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="介绍 Angular 应用中的一些基本概念。" aria-pressed="false"><span>Angular 的基本概念</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture" title="Angular 应用中的基本构造块。" target="_self"><span>基本概念简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-modules" title="关于 Angular 模块（NgModules）。" target="_self"><span>模块简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-components" title="关于组件、模板和视图。" target="_self"><span>组件简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-services" title="关于服务与依赖注入。" target="_self"><span>服务与 DI 简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-next-steps" title="超越基础阶段。" target="_self"><span>后续步骤</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="英雄指南是这里大量 Angular 范例的基础" aria-pressed="false"><span>英雄指南</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial" title="《英雄指南》教程简介" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt0" title="创建应用的外壳" target="_self"><span>应用的“外壳”</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt1" title="第一部分：构建一个简单的英雄编辑器" target="_self"><span>1. 英雄编辑器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt2" title="第二部分：构建一个主从结构的页面，用于展现英雄列表。" target="_self"><span>2. 显示英雄列表</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt3" title="第三部分：把主从结构的视图重构成几个独立的组件。" target="_self"><span>3. 创建特性组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt4" title="第四部分：创建一个可复用的服务来管理英雄数据。" target="_self"><span>4. 添加服务</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt5" title="第五部分：添加 Angular 路由器，并且学习在视图之间导航。" target="_self"><span>5. 添加应用内导航</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt6" title="第六部分：通过 HTTP 来获取并保存英雄数据。" target="_self"><span>6. 从服务器获取数据</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="通过数据绑定构建动态视图" aria-pressed="false"><span>组件与模板</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/displaying-data" title="属性绑定可以帮助应用把数据显示在界面上" target="_self"><span>显示数据</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-syntax" title="学习如何写模板，以便借助数据绑定机制显示数据并响应事件。" target="_self"><span>模板语法</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/user-input" title="用户输入会触发 DOM 事件。Angular 会通过事件绑定来监听那些事件，并把修改后的值传回应用的组件和模型中。" target="_self"><span>用户输入</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lifecycle-hooks" title="Angular 调用指令和组件的生命周期钩子函数，包括它的创建、变更和销毁时。" target="_self"><span>生命周期钩子</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-interaction" title="在不同的指令和组件之间共享信息" target="_self"><span>组件交互</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-styles" title="添加专属于某个组件的样式" target="_self"><span>组件样式</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-component-loader" title="动态加载组件" target="_self"><span>动态组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/elements" title="把组件转换成自定义元素" target="_self"><span>Angular 元素</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/attribute-directives" title="属性型指令把行为添加到现有元素上。" target="_self"><span>属性型指令</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/structural-directives" title="结构型指令可以操纵页面的布局" target="_self"><span>结构型指令</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/pipes" title="管道可以在模板中转换显示的内容。" target="_self"><span>管道</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 的表单" aria-pressed="false"><span>表单</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms-overview" title="表单可以创建集中、高效、引人注目的输入体验。Angular 表单可以协调一组数据绑定控件，跟踪变更，验证输入，并表达错误信息。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reactive-forms" title="使用 FormBuilder、表单组和表单数组创建响应式表单。" target="_self"><span>响应式表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms" title="使用指令和 Angular 模板语法创建模板驱动表单。" target="_self"><span>模板驱动表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/form-validation" title="验证用户的表单输入" target="_self"><span>表单验证</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-form" title="使用 FormGroup 渲染动态表单。" target="_self"><span>动态表单</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Observable 与 RxJS" aria-pressed="false"><span>Observable 与 RxJS</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables" title="" target="_self"><span>可观察对象(Observable)</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/rx-library" title="" target="_self"><span>RxJS 库</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables-in-angular" title="" target="_self"><span>Angular 中的可观察对象</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/practical-observable-usage" title="" target="_self"><span>用法实战</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/comparing-observables" title="" target="_self"><span>与其它技术的比较</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 中的模块" aria-pressed="false"><span>NgModules</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodules" title="使用 NgModule 让你的应用更高效" target="_self"><span>NgModule 简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-vs-jsmodule" title="JavaScript 模块和 NgModule 之间的差异" target="_self"><span>JS 模块 vs NgModule</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/bootstrapping" title="告诉 Angular 如何在根 &quot;AppModule&quot; 中构造和引导应用。" target="_self"><span>应用的根模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/frequent-ngmodules" title="介绍最常用的 NgModule" target="_self"><span>常用模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/module-types" title="介绍特性模块的几种类型" target="_self"><span>特性模块的分类</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/entry-components" title="关于 Angular 中入口组件的一切" target="_self"><span>入口组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/feature-modules" title="创建特性模块，以组织你的代码" target="_self"><span>特性模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/providers" title="服务提供者与 NgModule" target="_self"><span>服务提供者</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/singleton-services" title="创建单例服务" target="_self"><span>单例服务</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lazy-loading-ngmodules" title="惰性加载模块，以提高应用的性能" target="_self"><span>惰性加载的特性模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/sharing-ngmodules" title="共享 NgModule 让你的应用现代化。" target="_self"><span>共享 NgModule</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-api" title="理解 NgModule 的那些细节。" target="_self"><span>NgModule API</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-faq" title="回答关于 NgModules 的常见问题。" target="_self"><span>NgModule 常见问题</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="依赖注入：创建并注入各种服务。" aria-pressed="false"><span>依赖注入</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection" title="Angular 的依赖注入系统能够为 Angular 创建的类创建并交付它们所依赖的服务。" target="_self"><span>Angular 依赖注入</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/hierarchical-dependency-injection" title="与组件树平行的注入器树，并支持嵌套的依赖。" target="_self"><span>多级注入器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-providers" title="各种提供者类型的更多知识。" target="_self"><span>DI 提供者</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-in-action" title="依赖注入的使用技巧" target="_self"><span>DI 实战</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-navtree" title="使用注入器树来查找父组件。" target="_self"><span>浏览组件树</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/http" title="通过 HTTP 协议与远程服务器对话。" target="_self"><span>HttpClient</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/router" title="揭示如何通过 Angular 路由进行基本的屏幕导航。" target="_self"><span>路由与导航</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 动画系统指南" aria-pressed="false"><span>动画</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/animations" title="Angular 动画的基础技术。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/transition-and-triggers" title="转场与触发器的高级技术。" target="_self"><span>转场与触发器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/complex-animation-sequences" title="复杂的 Angular 动画序列。" target="_self"><span>复杂序列</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reusable-animations" title="创建可复用的动画。" target="_self"><span>可复用动画</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/route-animations" title="为路由提供转场动画。" target="_self"><span>路由转场动画</span></a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="把 Angular 用到你的实际工作中的一些技巧" aria-pressed="false"><span>其它技术</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/security" title="Angular 应用开发中的安全技术。" target="_self"><span>安全</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/i18n" title="把应用模板中的文本翻译成多种语言。" target="_self"><span>国际化（i18n）</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/accessibility" title="设计能被所有用户访问的应用" target="_self"><span>无障碍（a11y）</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular Service Worker: 控制应用资源的缓存。" aria-pressed="false"><span>Service Worker 与 PWA</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-intro" title="Angular 对 Service Worker 的实现提升了慢速或不稳定的网络连接下的用户体验。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-getting-started" title="在 CLI 项目中启用 Service Worker，并在浏览器中查看效果。" target="_self"><span>快速上手</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/app-shell" title="在 CLI 项目中启用应用外壳。" target="_self"><span>应用外壳</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-communications" title="那些能让你和 Angular 的 Service Worker 通讯的服务类。" target="_self"><span>与 Service Worker 通讯</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-devops" title="使用 Service Worker 运行应用、管理应用更新、调试以及杀掉正在运行的应用。" target="_self"><span>生产环境下的 Service Worker</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-config" title="配置 Service Worker 的缓存行为。" target="_self"><span>Service Worker 配置</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/universal" title="使用 Angular Universal 在服务端渲染 HTML。" target="_self"><span>服务端渲染</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="把 AngularJS 应用增量式的升级到 Angular。" aria-pressed="false"><span>从 AngularJS 升级</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade" title="把 AngularJS 应用增量式的升级到 Angular。" target="_self"><span>升级步骤</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade-performance" title="用更灵活的方式把 AngularJS 升级到 Angular。" target="_self"><span>更关注性能的升级方式</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ajs-quick-reference" title="学习如何把 AngularJS 的概念映射到 Angular 中。" target="_self"><span>AngularJS 与 Angular 的概念对照</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="使用共享库扩展 Angular" aria-pressed="false"><span>开发 Angular 库</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/libraries" title="理解何时以及如何使用和创建库。" target="_self"><span>库概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/using-libraries" title="把已发布的库集成进你的应用中。" target="_self"><span>使用已发布的库</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/creating-libraries" title="通过创建、发布和使用你自己的库来扩展 Angular。" target="_self"><span>创建库</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="理解原理图" aria-pressed="false"><span>原理图（Schematic）</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics" title="理解 Angular 如何使用原理图。" target="_self"><span>原理图概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-authoring" title="理解原理图的结构。" target="_self"><span>制作原理图</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-for-libraries" title="使用原理图来把你的库集成进 Angular CLI 中。" target="_self"><span>库的原理图</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cli-builder" title="使用构建器定制 Angular CLI。" target="_self"><span>CLI 构建器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/web-worker" title="在 Angular CLI 中使用 Web Worker。" target="_self"><span>Web Worker</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="关于构建、测试和部署的信息" aria-pressed="false"><span>开发工作流</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="理解 AOT 预先编译器。" aria-pressed="false"><span>AOT 预先编译器</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/aot-compiler" title="学习为何以及如何使用预先编译器。" target="_self"><span>预先编译</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/angular-compiler-options" title="配置 AOT 编译。" target="_self"><span>Angular 编译器选项</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/aot-metadata-errors" title="解决 AOT 编译错误。" target="_self"><span>AOT 元数据错误</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-typecheck" title="Angular 中的模板类型检查。" target="_self"><span>模板类型检查</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/build" title="构建应用及为应用启动开发服务器。" target="_self"><span>构建与运行</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/bazel" title="如何配置你的环境，以利用 Bazel 进行构建和测试。" target="_self"><span>使用 Bazel 进行构建</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/testing" title="测试 Angular 应用的技巧与实践。" target="_self"><span>测试</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deployment" title="了解如何部署 Angular 应用。" target="_self"><span>发布</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="与开发环境和工具集成起来" aria-pressed="false"><span>开发工具集成</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/language-service" title="使用 Angular 语言服务加速开发。" target="_self"><span>语言服务</span></a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 expanded selected ng-star-inserted" title="工作空间与项目的结构，及其配置文件。" aria-pressed="true"><span>配置</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 expanded selected"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/file-structure" title="Angular 工作区在文件系统中是怎样的。" target="_self"><span>项目文件结构</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 expanded selected ng-star-inserted" style="position:relative" href="guide/workspace-config" title="&quot;angular.json&quot; 包含供 CLI 命令使用的工作区和项目默认配置。" target="_self"><span>工作区配置</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/npm-packages" title="开发期间和运行期间所需的 npm 包的说明。" target="_self"><span>npm 包</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/typescript-configuration" title="给 Angular 开发者的 TypeScript 配置。" target="_self"><span>TypeScript 配置</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/browser-support" title="浏览器支持与腻子脚本指南。" target="_self"><span>浏览器支持</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 的版本发布实践、更新与升级。" aria-pressed="false"><span>发布信息</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating" title="如何把 Angular 应用和库升级到最新版本。" target="_self"><span>保持最新</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/releases" title="Angular 的版本、发布、支持、弃用策略及实践。" target="_self"><span>发布实践</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating-to-version-9" title="支持把你的应用从 8 升级到 9。" target="_self"><span>升级到第 9 版</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deprecations" title="弃用的 Angular API 和特性汇总。" target="_self"><span>弃用清单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/ivy" title="关于 Angular Ivy 的编译与渲染管道。" target="_self"><span>Angular Ivy</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 语法、编码、术语汇总。" aria-pressed="false"><span>快捷手册</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cheatsheet" title="关于 Angular 常用编码技术的快速指南。" target="_self"><span>速查表</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/styleguide" title="写出 Angular 风格的程序" target="_self"><span>风格指南</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/glossary" title="Angular 中最重要的词汇的简要定义。" target="_self"><span>词汇表</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular CLI 命令参考手册。" aria-pressed="false"><span>CLI 命令</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli" title="CLI 工具介绍、命令、语法" target="_self"><span>概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/usage-analytics-gathering" title="管理员如何从用户那里收集使用情况分析。" target="_self"><span>使用情况分析</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/add" title="ng add." target="_self"><span>ng add</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/analytics" title="ng analytics." target="_self"><span>ng analytics</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/build" title="ng build." target="_self"><span>ng build</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/config" title="ng config." target="_self"><span>ng config</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/deploy" title="ng deploy." target="_self"><span>ng deploy</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/doc" title="ng doc." target="_self"><span>ng doc</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/e2e" title="ng e2e." target="_self"><span>ng e2e</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/generate" title="ng generate." target="_self"><span>ng generate</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/help" title="ng help." target="_self"><span>ng help</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/lint" title="ng lint." target="_self"><span>ng lint</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/new" title="ng new." target="_self"><span>ng new</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/run" title="ng run." target="_self"><span>ng run</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/serve" title="ng serve." target="_self"><span>ng serve</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/test" title="ng test." target="_self"><span>ng test</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/update" title="ng update." target="_self"><span>ng update</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/version" title="ng version." target="_self"><span>ng version</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/xi18n" title="ng xi18n." target="_self"><span>ng xi18n</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="api" title="关于 Angular 中类和值的详细信息。" target="_self"><span>API 参考手册</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><div class="mat-divider ng-star-inserted" style="margin:4px 20px;border-top:1px solid #d3d3d3"></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://github.com/ng-docs/ng-docs.github.io/issues" title="github 上的中文互助问答区" target="_blank"><span>互助问答</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://material.angular.cn" title="Angular Material 组件库的中文文档" target="_blank"><span>官方 Material 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.ant.design/" title="Ant Design 的 Angular 实现，服务于企业级后台产品。" target="_blank"><span>ng-zorro 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://devui.design/" title="“华为云” 开源的企业级组件库，核心设计思想是：致简、沉浸、灵活" target="_blank"><span>华为 DevUI 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.mobile.ant.design/" title="Ant Design Mobile 的 Angular 实现，服务于无线产品。" target="_blank"><span>ng-zorro mobile 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://flutter.cn/" title="Flutter 中文文档站" target="_blank"><span>友站：Flutter 中文</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item></aio-nav-menu><div class="doc-version ng-tns-c18-1"><aio-select><div class="form-select-menu"><button class="form-select-button"><span><strong></strong></span><span>stable (v9.0.0)</span></button></div></aio-select></div></div></mat-sidenav><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav-content cdkscrollable="" class="mat-drawer-content mat-sidenav-content ng-star-inserted" style="margin-left:261px"><main role="main" class="sidenav-content" id="guide-workspace-config"><aio-mode-banner></aio-mode-banner><aio-doc-viewer class=""><div style="opacity:1"><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/aio/content/guide/workspace-config.md?message=docs%3A%20请简述你的修改..." aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a></div><div class="content"><h1 id="angular-workspace-configuration" translation-result="on">Angular 工作区配置<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#angular-workspace-configuration"><i class="material-icons">link</i></a></h1><aio-toc class="embedded" ng-version="9.0.0-rc.11"><div class="toc-inner no-print collapsed ng-star-inserted"><button type="button" title="Expand/collapse contents" aria-label="Expand/collapse contents" class="toc-heading embedded secondary ng-star-inserted" aria-pressed="false">目录<mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon collapsed mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><ul class="toc-list embedded"><li class="h2 ng-star-inserted" title="JSON 的总体结构"><a href="guide/workspace-config#overall-json-structure">JSON 的总体结构</a></li><li class="h2 ng-star-inserted" title="项目配置选项"><a href="guide/workspace-config#project-configuration-options">项目配置选项</a></li><li class="h2 ng-star-inserted" title="生成器原理图"><a href="guide/workspace-config#generation-schematics">生成器原理图</a></li><li class="h2 secondary ng-star-inserted" title="项目工具的配置选项"><a href="guide/workspace-config#project-tool-configuration-options">项目工具的配置选项</a></li><li class="h3 secondary ng-star-inserted" title="默认的建筑师构建器和目标"><a href="guide/workspace-config#default-architect-builders-and-targets">默认的建筑师构建器和目标</a></li><li class="h3 secondary ng-star-inserted" title="配置构建器目标"><a href="guide/workspace-config#configuring-builder-targets">配置构建器目标</a></li><li class="h2 secondary ng-star-inserted" title="构建目标"><a href="guide/workspace-config#build-target">构建目标</a></li><li class="h3 secondary ng-star-inserted" title="备用的构建配置"><a href="guide/workspace-config#alternate-build-configurations">备用的构建配置</a></li><li class="h3 secondary ng-star-inserted" title="额外的构建和测试选项"><a href="guide/workspace-config#additional-build-and-test-options">额外的构建和测试选项</a></li><li class="h2 secondary ng-star-inserted" title="复杂配置的值"><a href="guide/workspace-config#complex-configuration-values">复杂配置的值</a></li><li class="h3 secondary ng-star-inserted" title="项目资产（asset）配置"><a href="guide/workspace-config#assets-configuration">项目资产（asset）配置</a></li><li class="h3 secondary ng-star-inserted" title="样式和脚本配置"><a href="guide/workspace-config#styles-and-scripts-configuration">样式和脚本配置</a></li><li class="h3 secondary ng-star-inserted" title="优化和 sourceMap 配置"><a href="guide/workspace-config#optimization-and-source-map-configuration">优化和 sourceMap 配置</a></li></ul><button type="button" title="Expand/collapse contents" aria-label="Expand/collapse contents" class="toc-more-items embedded material-icons collapsed ng-star-inserted" aria-pressed="false"></button></div></aio-toc><h1 translation-origin="off" id="angular-workspace-configuration">Angular workspace configuration<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#angular-workspace-configuration"><i class="material-icons">link</i></a></h1><p translation-result="on">Angular <a href="guide/glossary#workspace">工作区</a>根目录下的 <code>angular.json</code> 文件提供了全工作区级的配置和具体项目的默认配置，供 Angular CLI 中的构建工具和开发工具使用。 此配置中所提供的路径值都是相对于工作区根目录的。</p><p translation-origin="off">A file named <code>angular.json</code> at the root level of an Angular <a href="guide/glossary#workspace">workspace</a> provides workspace-wide and project-specific configuration defaults for build and development tools provided by the Angular CLI. Path values given in the configuration are relative to the root workspace folder.</p><h2 id="overall-json-structure" translation-result="on">JSON 的总体结构<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#overall-json-structure"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="overall-json-structure">Overall JSON structure<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#overall-json-structure"><i class="material-icons">link</i></a></h2><p translation-result="on">在 <code>angular.json</code> 的顶层，一些属性用于配置工作区，其中的 <code>projects</code> 区则包含其余的针对每个项目的配置项。CLI 在工作空间级的默认设置可以被项目级的设置所覆盖，而项目级的设置可以被命令行中的设置所覆盖。</p><p translation-origin="off">At the top level of <code>angular.json</code>, a few properties configure the workspace, and a <code>projects</code> section contains the remaining per-project configuration options. CLI defaults set at the workspace level can be overridden by defaults set at the project level, and defaults set at the project level can be overridden on the command line.</p><p translation-result="on">下列属性位于文件的顶层，用于配置工作空间。</p><p translation-origin="off">The following properties, at the top level of the file, configure the workspace.</p><ul><li><p translation-result="on"><code>version</code>：该配置文件的版本。</p><p translation-origin="off"><code>version</code>: The configuration-file version.</p></li><li><p translation-result="on"><code>newProjectRoot</code>：用来创建新工程的位置。绝对路径或相对于工作区目录的路径。</p><p translation-origin="off"><code>newProjectRoot</code>: Path where new projects are created. Absolute or relative to the workspace folder.</p></li><li><p translation-result="on"><code>defaultProject</code>：当命令中没有指定参数时，要使用的默认工程名。当你用 <code>ng new</code> 在新的工作区中创建新应用时，该应用就会一直作为此工作区的默认项目，除非你到这里修改它。</p><p translation-origin="off"><code>defaultProject</code>: Default project name to use in commands, where not provided as an argument. When you use <code>ng new</code> to create a new app in a new workspace, that app is the default project for the workspace until you change it here.</p></li><li><p translation-result="on"> <code>schematics</code>：一组<a href="guide/glossary#schematic">原理图</a>，用于定制 <code>ng generate</code> 子命令在本工作空间中的默认选项。参见稍后的<a href="guide/workspace-config#schematics">生成器原理图</a>。</p><p translation-origin="off"><code>schematics</code> : A set of <a href="guide/glossary#schematic">schematics</a> that customize the <code>ng generate</code> sub-command option defaults for this workspace. See <a href="guide/workspace-config#schematics">Generation schematics</a> below.</p></li><li><p translation-result="on"><code>projects</code>：对于工作区中的每个项目（应用或库）都会包含一个子分区，子分区中是每个项目的配置项。</p><p translation-origin="off"><code>projects</code> : Contains a subsection for each project (library or application) in the workspace, with the per-project configuration options.</p></li></ul><p translation-result="on">你通过 <code>ng new app_name</code> 命令创建的初始应用会列在 <code>projects</code> 目录下：</p><p translation-origin="off">The initial app that you create with <code>ng new app_name</code> is listed under "projects":</p><code-example language="json" ng-version="9.0.0-rc.11"><div style="display:none">"projects": { "app_name": { ... } ... }</div><aio-code><pre class="lang-json prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">"projects"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="str">"app_name"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="pun">...</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
  </span><span class="pun">...</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">你使用 <code>ng generate application</code> 创建的每个应用都有相应的端到端测试项目，它有自己的配置节。当你使用 <code>ng generate library</code> 创建库项目时，库项目也会添加到 <code>projects</code> 节。</p><p translation-origin="off">Each additional app that you create with <code>ng generate application</code> has a corresponding end-to-end test project, with its own configuration section. When you create a library project with <code>ng generate library</code>, the library project is also added to the <code>projects</code> section.</p><div class="alert is-helpful"><p translation-result="on">请注意，配置文件的 <code>projects</code> 节与工作区的文件结构并不完全对应。</p><p translation-origin="off">Note that the <code>projects</code> section of the configuration file does not correspond exactly to the workspace file structure.</p><ul><li><p translation-result="on"><code>ng new</code> 创建的这个初始应用位于工作区文件结构的顶层。</p><p translation-origin="off">The initial app created by <code>ng new</code> is at the top level of the workspace file structure.</p></li><li><p translation-result="on">其它应用和库位于工作区的 <code>projects</code> 文件夹中。</p><p translation-origin="off">Additional applications and libraries go into a <code>projects</code> folder in the workspace.</p><p translation-result="on">欲知详情，参见<a href="guide/file-structure">工作区和项目文件结构</a>。</p><p translation-origin="off">For more information, see <a href="guide/file-structure">Workspace and project file structure</a>.</p></li></ul></div><h2 id="project-configuration-options" translation-result="on">项目配置选项<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#project-configuration-options"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="project-configuration-options">Project configuration options<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#project-configuration-options"><i class="material-icons">link</i></a></h2><p translation-result="on">每个项目的 <code>projects:&lt;project_name&gt;</code> 下都有以下顶层配置属性。</p><p translation-origin="off">The following top-level configuration properties are available for each project, under <code>projects:&lt;project_name&gt;</code>.</p><code-example language="json" ng-version="9.0.0-rc.11"><div style="display:none">"my-app": { "root": "", "sourceRoot": "src", "projectType": "application", "prefix": "app", "schematics": {}, "architect": {} }</div><aio-code><pre class="lang-json prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">"my-app"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="str">"root"</span><span class="pun">:</span><span class="pln"> </span><span class="str">""</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"sourceRoot"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"src"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"projectType"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"application"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"prefix"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"app"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"schematics"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{},</span><span class="pln">
  </span><span class="str">"architect"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><table><thead><tr><th align="left"><p translation-result="on">属性</p><p translation-origin="off">PROPERTY</p></th><th align="left"><p translation-result="on">说明</p><p translation-origin="off">DESCRIPTION</p></th></tr></thead><tbody><tr><td align="left"><code>root</code></td><td align="left"><p translation-result="on">该项目的根文件夹，相对于工作区文件夹的路径。初始应用的值为空，因为它位于工作区的顶层。</p><p translation-origin="off">The root folder for this project's files, relative to the workspace folder. Empty for the initial app, which resides at the top level of the workspace.</p></td></tr><tr><td align="left"><code>sourceRoot</code></td><td align="left"><p translation-result="on">该项目源文件的根文件夹。</p><p translation-origin="off">The root folder for this project's source files.</p></td></tr><tr><td align="left"><code>projectType</code></td><td align="left"><p translation-result="on">"application" 或 "library" 之一。应用可以在浏览器中独立运行，而库则不行。</p><p translation-origin="off">One of "application" or "library". An application can run independently in a browser, while a library cannot.</p></td></tr><tr><td align="left"><code>prefix</code></td><td align="left"><p translation-result="on">Angular 所生成的选择器的前缀字符串。可以自定义它，以作为应用或功能区的标识。</p><p translation-origin="off">A string that Angular prepends to generated selectors. Can be customized to identify an app or feature area.</p></td></tr><tr><td align="left"><code>schematics</code></td><td align="left"><p translation-result="on">一组原理图（schematic），它可以为该项目自定义 <code>ng generate</code> 子命令的默认选项。</p><p translation-origin="off">A set of schematics that customize the <code>ng generate</code> sub-command option defaults for this project. See <a href="guide/workspace-config#schematics">Generation schematics</a> below.</p></td></tr><tr><td align="left"><code>architect</code></td><td align="left"><p translation-result="on">为本项目的各个构建器目标配置默认值。</p><p translation-origin="off">Configuration defaults for Architect builder targets for this project.</p></td></tr></tbody></table><a id="schematics"></a><h2 id="generation-schematics" translation-result="on">生成器原理图<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#generation-schematics"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="generation-schematics">Generation schematics<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#generation-schematics"><i class="material-icons">link</i></a></h2><p translation-result="on">Angular 生成器的<a href="guide/glossary#schematic">原理图</a>是一组用来修改项目的指南，包括添加新文件或修改现有文件。 默认情况下，Angular CLI 的 <code>ng generate</code> 子命令会从 <code>@angular</code> 包中收集原理图。 可以用 <code>schematic-package:schematic-name</code> 格式来为子命令指定原理图名称；比如，用来生成组件的原理图名叫 <code>@angular:component</code>。</p><p translation-origin="off">Angular generation <a href="guide/glossary#schematic">schematics</a> are instructions for modifying a project by adding files or modifying existing files. Individual schematics for the default Angular CLI <code>ng generate</code> sub-commands are collected in the package <code>@angular</code>. Specify the schematic name for a subcommand in the format <code>schematic-package:schematic-name</code>; for example, the schematic for generating a component is <code>@angular:component</code>.</p><p translation-result="on">供 CLI 生成项目及其部件的默认原理图的 JSON 模式（schema）位于 <a href="https://github.com/angular/angular-cli/blob/7.0.x/packages/schematics/angular/application/schema.json"><code>@schematics/angular</code></a>包中。 这个模式描述了 CLI <code>ng generate</code> 子命令的每个选项，它们会显示在 <code>--help</code> 的输出中。</p><p translation-origin="off">The JSON schemas for the default schematics used by the CLI to generate projects and parts of projects are collected in the package <a href="https://github.com/angular/angular-cli/blob/7.0.x/packages/schematics/angular/application/schema.json"><code>@schematics/angular</code></a>. The schema describes the options available to the CLI for each of the <code>ng generate</code> sub-commands, as shown in the <code>--help</code> output.</p><p translation-result="on">这个模式中的每个字段都对应于 CLI 子命令选项的参数取值范围和默认值。 你可以修改此命名空间的模式文件，来为某个子命令选项指定另外的默认值。</p><p translation-origin="off">The fields given in the schema correspond to the allowed argument values and defaults for the CLI sub-command options. You can update your workspace schema file to set a different default for a sub-command option.</p><a id="architect"></a><h2 id="project-tool-configuration-options" translation-result="on">项目工具的配置选项<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#project-tool-configuration-options"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="project-tool-configuration-options">Project tool configuration options<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#project-tool-configuration-options"><i class="material-icons">link</i></a></h2><p translation-result="on">建筑师（Architect）是 CLI 用来执行复杂任务（例如编译和测试运行）的工具。 Architect 是一个根据<a href="guide/glossary#target">目标</a>配置运行指定的<a href="guide/glossary#builder">构建器</a>以完成指定任务的外壳。您可以定义和配置新的构建器和目标以扩展 CLI。请参阅 <a href="guide/cli-builder">Angular CLI 构建器</a> 。</p><p translation-origin="off">Architect is the tool that the CLI uses to perform complex tasks, such as compilation and test running. Architect is a shell that runs a specified <a href="guide/glossary#builder">builder</a> to perform a given task, according to a <a href="guide/glossary#target">target</a> configuration. You can define and configure new builders and targets to extend the CLI. See <a href="guide/cli-builder">Angular CLI Builders</a>.</p><a id="default-build-targets"></a><h3 id="default-architect-builders-and-targets" translation-result="on">默认的建筑师构建器和目标<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#default-architect-builders-and-targets"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="default-architect-builders-and-targets">Default Architect builders and targets<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#default-architect-builders-and-targets"><i class="material-icons">link</i></a></h3><p translation-result="on">Angular 定义了用于特定 CLI 命令或常规 <code>ng run</code> 命令的默认构建器。为每个默认构建器定义选项和默认值的 JSON 模式收集在<a href="https://github.com/angular/angular-cli/blob/8.0.x/packages/angular/cli/lib/config/schema.json"><code>@angular-devkit/build-angular</code></a>包中。这些架构为以下构建器配置选项。</p><p translation-origin="off">Angular defines default builders for use with specific CLI commands, or with the general <code>ng run</code> command. The JSON schemas that the define the options and defaults for each of these default builders are collected in the <a href="https://github.com/angular/angular-cli/blob/8.0.x/packages/angular/cli/lib/config/schema.json"><code>@angular-devkit/build-angular</code></a>package. The schemas configure options for the following builders.</p><ul><li><p>app-shell</p></li><li><p>browser</p></li><li><p>dev-server</p></li><li><p>extract-i18n</p></li><li><p>karma</p></li><li><p>protractor</p></li><li><p>server</p></li><li><p>tslint</p></li></ul><h3 id="configuring-builder-targets" translation-result="on">配置构建器目标<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#configuring-builder-targets"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="configuring-builder-targets">Configuring builder targets<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#configuring-builder-targets"><i class="material-icons">link</i></a></h3><p translation-result="on"><code>angular.json</code> 的 <code>architect</code> 部分包含一组建筑目标。很多目标都对应于运行它们的 CLI 命令。使用 <code>ng run</code> 命令可以运行一些额外的预定义目标，并可以定义自己的目标。</p><p translation-origin="off">The <code>architect</code> section of <code>angular.json</code> contains a set of Architect targets. Many of the targets correspond to the CLI commands that run them. Some additional predefined targets can be run using the <code>ng run</code> command, and you can define your own targets.</p><p translation-result="on">每个目标对象都指定了该目标的 <code>builder</code>，它是建筑师所运行工具的 npm 包。此外，每个目标都有一个 <code>options</code> 部分，用于配置该目标的默认选项，<code>configurations</code> 部分可以为目标命名并指定备用配置。参见稍后的<a href="guide/workspace-config#build-target">构建目标</a>部分的例子。</p><p translation-origin="off">Each target object specifies the <code>builder</code> for that target, which is the npm package for the tool that Architect runs. In addition, each target has an <code>options</code> section that configures default options for the target, and a <code>configurations</code> section that names and specifies alternative configurations for the target. See the example in <a href="guide/workspace-config#build-target">Build target</a> below.</p><code-example language="json" ng-version="9.0.0-rc.11"><div style="display:none">"architect": { "build": { }, "serve": { }, "e2e" : { }, "test": { }, "lint": { }, "extract-i18n": { }, "server": { }, "app-shell": { } }</div><aio-code><pre class="lang-json prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">"architect"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="str">"build"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
  </span><span class="str">"serve"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
  </span><span class="str">"e2e"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
  </span><span class="str">"test"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
  </span><span class="str">"lint"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
  </span><span class="str">"extract-i18n"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
  </span><span class="str">"server"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
  </span><span class="str">"app-shell"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><ul><li><p translation-result="on"> <code>architect/build</code> 节会为 <code>ng build</code> 命令的选项配置默认值。更多信息，参见稍后的<a href="guide/workspace-config#build-target">构建目标</a>部分。</p><p translation-origin="off">The <code>architect/build</code> section configures defaults for options of the <code>ng build</code> command. See <a href="guide/workspace-config#build-target">Build target</a> below for more information.</p></li><li><p translation-result="on"><code>architect/serve</code> 节会覆盖构建默认值，并为 <code>ng serve</code> 命令提供额外的服务器默认值。除了 <code>ng build</code> 命令的可用选项之外，还增加了与开发服务器有关的选项。</p><p translation-origin="off">The <code>architect/serve</code> section overrides build defaults and supplies additional serve defaults for the <code>ng serve</code> command. In addition to the options available for the <code>ng build</code> command, it adds options related to serving the app.</p></li><li><p translation-result="on"><code>architect/e2e</code> 节覆盖了构建选项默认值，以便用 <code>ng e2e</code> 命令构建端到端测试应用。</p><p translation-origin="off">The <code>architect/e2e</code> section overrides build-option defaults for building end-to-end testing apps using the <code>ng e2e</code> command.</p></li><li><p translation-result="on"><code>architect/test</code> 节会覆盖测试时的构建选项默认值，并为 <code>ng test</code> 命令提供额外的默认值以供运行测试。</p><p translation-origin="off">The <code>architect/test</code> section overrides build-option defaults for test builds and supplies additional test-running defaults for the <code>ng test</code> command.</p></li><li><p translation-result="on"><code>architect/lint</code> 节为 <code>ng lint</code> 命令配置了默认值，用于对项目源文件进行代码分析。 Angular 默认的 linting 工具为 <a href="https://palantir.github.io/tslint/">TSLint</a>。</p><p translation-origin="off">The <code>architect/lint</code> section configures defaults for options of the <code>ng lint</code> command, which performs code analysis on project source files. The default linting tool for Angular is <a href="https://palantir.github.io/tslint/">TSLint</a>.</p></li><li><p translation-result="on"><code>architect/extract-i18n</code> 节为 <code>ng xi18n</code> 命令所用到的 <code>ng-xi18n</code> 工具选项配置了默认值，该命令用于从源代码中提取带标记的消息串，并输出翻译文件。</p><p translation-origin="off">The <code>architect/extract-i18n</code> section configures defaults for options of the <code>ng-xi18n</code> tool used by the <code>ng xi18n</code> command, which extracts marked message strings from source code and outputs translation files.</p></li><li><p translation-result="on"><code>architect/server</code> 节用于为使用 <code>ng run &lt;project&gt;:server</code> 命令创建带服务器端渲染的 Universal 应用配置默认值。</p><p translation-origin="off">The <code>architect/server</code> section configures defaults for creating a Universal app with server-side rendering, using the <code>ng run &lt;project&gt;:server</code> command.</p></li><li><p translation-result="on"><code>architect/app-shell</code> 部分使用 <code>ng run &lt;project&gt;:app-shell</code> 命令为渐进式 Web 应用（PWA）配置创建应用外壳的默认值。</p><p translation-origin="off">The <code>architect/app-shell</code> section configures defaults for creating an app shell for a progressive web app (PWA), using the <code>ng run &lt;project&gt;:app-shell</code> command.</p></li></ul><p translation-result="on">一般来说，可以为 <a href="cli">CLI 参考手册中</a>列出的每个命令配置相应的默认值。注意，配置文件中的所有选项都必须使用 <a href="guide/glossary#case-conventions">camelCase</a>，而不是 dash-case。</p><p translation-origin="off">In general, the options for which you can configure defaults correspond to the command options listed in the <a href="cli">CLI reference page</a> for each command. Note that all options in the configuration file must use <a href="guide/glossary#case-conventions">camelCase</a>, rather than dash-case.</p><a id="build-target"></a><h2 id="build-target" translation-result="on">构建目标<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#build-target"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="build-target">Build target<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#build-target"><i class="material-icons">link</i></a></h2><p translation-result="on"><code>architect/build</code> 节会为 <code>ng build</code> 命令的选项配置默认值。它具有下列顶层属性。</p><p translation-origin="off">The <code>architect/build</code> section configures defaults for options of the <code>ng build</code> command. It has the following top-level properties.</p><table><thead><tr><th align="left"><p translation-result="on">属性</p><p translation-origin="off">PROPERTY</p></th><th align="left"><p translation-result="on">说明</p><p translation-origin="off">DESCRIPTION</p></th></tr></thead><tbody><tr><td align="left"><code>builder</code></td><td align="left"><p translation-result="on">用于构建此目标的构建工具的 npm 包。默认为 <code>@angular-devkit/build-angular:<a href="api/animations/browser" class="code-anchor">browser</a></code>，它使用的是 <a href="https://webpack.js.org/">webpack</a> 打包器。</p><p translation-origin="off">The npm package for the build tool used to create this target. The default builder for an application (<code>ng build myApp</code>)is <code>@angular-devkit/build-angular:<a href="api/animations/browser" class="code-anchor">browser</a></code>, which uses the <a href="https://webpack.js.org/">webpack</a> package bundler. Note that a different builder is used for building a library (<code>ng build myLib</code>).</p></td></tr><tr><td align="left"><code>options</code></td><td align="left"><p translation-result="on">本节包含构建选项的默认值，当没有指定命名的备用配置时使用。参见下面的<a href="guide/workspace-config#build-props">默认构建选项</a> 。</p><p translation-origin="off">This section contains default build target options, used when no named alternative configuration is specified. See <a href="guide/workspace-config#default-build-targets">Default build targets</a> below.</p></td></tr><tr><td align="left"><code>configurations</code></td><td align="left"><p translation-result="on">本节定义并命名针对不同目标的备用配置。它为每个命名配置都包含一节，用于设置该目标环境的默认选项。参见下面的<a href="guide/workspace-config#build-configs">备用的构建配置</a> 。</p><p translation-origin="off">This section defines and names alternative configurations for different intended destinations. It contains a section for each named configuration, which sets the default options for that intended environment. See <a href="guide/workspace-config#build-configs">Alternate build configurations</a> below.</p></td></tr></tbody></table><a id="build-configs"></a><h3 id="alternate-build-configurations" translation-result="on">备用的构建配置<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#alternate-build-configurations"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="alternate-build-configurations">Alternate build configurations<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#alternate-build-configurations"><i class="material-icons">link</i></a></h3><p translation-result="on">默认情况下，会定义一个 <code>production</code> 配置，<code>ng build</code> 命令会使用该配置下的 <code>--prod</code> 选项。这里的 <code>production</code> 配置会设置各种默认值来优化应用，例如打包文件、最小化多余空格、移除注释和死代码，以及重写代码以使用简短的名字（“minification”）。</p><p translation-origin="off">By default, a <code>production</code> configuration is defined, and the <code>ng build</code> command has <code>--prod</code> option that builds using this configuration. The <code>production</code> configuration sets defaults that optimize the app in a number of ways, such as bundling files, minimizing excess whitespace, removing comments and dead code, and rewriting code to use short, cryptic names ("minification").</p><p translation-result="on">你可以定义和命名适用于你的开发过程的其它备用配置（例如<code>stage</code>）。其它构建配置的一些例子是 AIO 自己使用的 <code>stable</code>、<code>archive</code>、<code>next</code>，以及构建本地化版本应用所需的各个与区域有关的配置置。欲知详情，参见<a href="guide/i18n#merge-aot">国际化（i18n）</a> 。</p><p translation-origin="off">You can define and name additional alternate configurations (such as <code>stage</code>, for instance) appropriate to your development process. Some examples of different build configurations are <code>stable</code>, <code>archive</code> and <code>next</code> used by AIO itself, and the individual locale-specific configurations required for building localized versions of an app. For details, see <a href="guide/i18n#merge-aot">Internationalization (i18n)</a>.</p><p translation-result="on">您可以通过将它们的名称传给 <code>--configuration</code> 命令行标志来选择替代配置。</p><p translation-origin="off">You can select an alternate configuration by passing its name to the <code>--configuration</code> command line flag.</p><p translation-result="on">您还可以用逗号分隔的列表传入多个配置名称。例如，要同时应用 <code>stage</code> 和 <code>fr</code> 构建配置，请使用命令 <code>ng build --configuration stage,fr</code> 。在这种情况下，该命令从左到右解析命名的配置。如果多个配置更改了同一个设置，则最后设置的值生效。</p><p translation-origin="off">You can also pass in more than one configuration name as a comma-separated list. For example, to apply both <code>stage</code> and <code>fr</code> build configurations, use the command <code>ng build --configuration stage,fr</code>. In this case, the command parses the named configurations from left to right. If multiple configurations change the same setting, the last-set value is the final one.</p><p translation-result="on">如果还使用了 <code>--prod</code> 命令行标志，则将首先应用它，并且可以通过 <code>--configuration</code> 标志指定的任何配置覆盖其设置。</p><p translation-origin="off">If the <code>--prod</code> command line flag is also used, it is applied first, and its settings can be overridden by any configurations specified via the <code>--configuration</code> flag.</p><a id="build-props"></a><h3 id="additional-build-and-test-options" translation-result="on">额外的构建和测试选项<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#additional-build-and-test-options"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="additional-build-and-test-options">Additional build and test options<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#additional-build-and-test-options"><i class="material-icons">link</i></a></h3><p translation-result="on"><a href="cli/build"><code>ng build</code></a>、<a href="cli/serve"><code>ng serve</code></a>和 <a href="cli/test"><code>ng test</code></a>命令的可配置选项通常与 <a href="cli/build"><code>ng build</code></a>、<a href="cli/serve"><code>ng serve</code></a>和 <a href="cli/test"><code>ng test</code></a>命令的可用选项一一对应。有关这些选项及其取值范围的更多信息，参见“ <a href="cli">CLI参考手册”</a>。</p><p translation-origin="off">The configurable options for a default or targeted build generally correspond to the options available for the <a href="cli/build"><code>ng build</code></a>, <a href="cli/serve"><code>ng serve</code></a>, and <a href="cli/test"><code>ng test</code></a>commands. For details of those options and their possible values, see the <a href="cli">CLI Reference</a>.</p><p translation-result="on">一些额外的选项（如下所列）只能通过配置文件来设置，可以直接编辑，也可以使用 <a href="cli/config"><code>ng config</code></a>命令。</p><p translation-origin="off">Some additional options can only be set through the configuration file, either by direct editing or with the <a href="cli/config"><code>ng config</code></a>command.</p><table><thead><tr><th align="left"><p translation-result="on">选项属性</p><p translation-origin="off">OPTIONS PROPERTIES</p></th><th align="left"><p translation-result="on">说明</p><p translation-origin="off">DESCRIPTION</p></th></tr></thead><tbody><tr><td align="left"><code>assets</code></td><td align="left"><p translation-result="on">一个对象，包含一些用于添加到项目的全局上下文中的静态文件路径。它的默认路径指向项目的图标文件及项目的 <code>assets</code> 文件夹。参见稍后的<a href="guide/workspace-config#asset-config">项目资产（asset）配置</a>部分。</p><p translation-origin="off">An object containing paths to static assets to add to the global context of the project. The default paths point to the project's icon file and its <code>assets</code> folder. See more in <a href="guide/workspace-config#asset-config">Assets configuration</a> below.</p></td></tr><tr><td align="left"><code>styles</code></td><td align="left"><p translation-result="on">一个对象，包含一些要添加到项目全局上下文中的样式文件。 Angular CLI 支持 CSS 导入和所有主要的 CSS 预处理器： <a href="http://sass-lang.com/">sass/scss</a>、<a href="http://lesscss.org/">less</a> 和 <a href="http://stylus-lang.com/">stylus</a>。参见稍后的 <a href="guide/workspace-config#style-script-config">样式和脚本配置</a>部分。</p><p translation-origin="off">An array of style files to add to the global context of the project. Angular CLI supports CSS imports and all major CSS preprocessors: <a href="http://sass-lang.com/">sass/scss</a>, <a href="http://lesscss.org/">less</a>, and <a href="http://stylus-lang.com/">stylus</a>. See more in <a href="guide/workspace-config#style-script-config">Styles and scripts configuration</a> below.</p></td></tr><tr><td align="left"><code>stylePreprocessorOptions</code></td><td align="left"><p translation-result="on">一个对象，包含要传给样式预处理器的选项"值-对"。参见稍后的 <a href="guide/workspace-config#style-script-config">样式和脚本配置</a> 部分。</p><p translation-origin="off">An object containing option-value pairs to pass to style preprocessors. See more in <a href="guide/workspace-config#style-script-config">Styles and scripts configuration</a> below.</p></td></tr><tr><td align="left"><code>scripts</code></td><td align="left"><p translation-result="on">一个对象，包含一些 JavaScript 脚本文件，用于添加到项目的全局上下文中。这些脚本的加载方式和在 <code>index.html</code> 的 <code>&lt;script&gt;</code> 标签中添加是完全一样的。参见稍后的 <a href="guide/workspace-config#style-script-config">样式和脚本配置</a> 部分。</p><p translation-origin="off">An object containing JavaScript script files to add to the global context of the project. The scripts are loaded exactly as if you had added them in a <code>&lt;script&gt;</code> tag inside <code>index.html</code>. See more in <a href="guide/workspace-config#style-script-config">Styles and scripts configuration</a> below.</p></td></tr><tr><td align="left"><code>budgets</code></td><td align="left"><p translation-result="on">全部或部分应用的默认尺寸预算的类型和阈值。当构建的输出达到或超过阈值大小时，你可以将构建器配置为报告警告或错误。参见<a href="guide/build#configure-size-budgets">配置尺寸预算</a> 。（不适用于 <code>test</code> 部分。）</p><p translation-origin="off">Default size-budget type and threshholds for all or parts of your app. You can configure the builder to report a warning or an error when the output reaches or exceeds a threshold size. See <a href="guide/build#configure-size-budgets">Configure size budgets</a>. (Not available in <code>test</code> section.)</p></td></tr><tr><td align="left"><code>fileReplacements</code></td><td align="left"><p translation-result="on">一个对象，包含一些文件及其编译时替代品。参见<a href="guide/build#configure-target-specific-file-replacements">为指定的目标配置文件替换规则</a> 部分。</p><p translation-origin="off">An object containing files and their compile-time replacements. See more in <a href="guide/build#configure-target-specific-file-replacements">Configure target-specific file replacements</a>.</p></td></tr></tbody></table><a id="complex-config"></a><h2 id="complex-configuration-values" translation-result="on">复杂配置的值<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#complex-configuration-values"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="complex-configuration-values">Complex configuration values<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#complex-configuration-values"><i class="material-icons">link</i></a></h2><p translation-result="on">选项 <code>assets</code>，<code>styles</code> 和 <code>scripts</code> 的值可以是简单的路径字符串，也可以是带有特定字段的对象值。可以使用命令标志将 <code>sourceMap</code> 和 <code>optimization</code> 选项设置为简单的布尔值，但也可以使用配置文件为其指定复杂的值。以下各节提供了在每种情况下如何使用这些复数值的详细信息。</p><p translation-origin="off">The options <code>assets</code>, <code>styles</code>, and <code>scripts</code> can have either simple path string values, or object values with specific fields. The <code>sourceMap</code> and <code>optimization</code> options can be set to a simple Boolean value with a command flag, but can also be given a complex value using the configuration file. The following sections provide more details of how these complex values are used in each case.</p><a id="asset-config"></a><h3 id="assets-configuration" translation-result="on">项目资产（asset）配置<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#assets-configuration"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="assets-configuration">Assets configuration<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#assets-configuration"><i class="material-icons">link</i></a></h3><p translation-result="on">每个 <code>build</code> 目标配置都可以包含一个 <code>assets</code> 数组，它列出了当你构建项目时要复制的文件或文件夹。默认情况下，会复制 <code>src/assets/</code> 文件夹和 <code>src/favicon.ico</code> 。</p><p translation-origin="off">Each <code>build</code> target configuration can include an <code>assets</code> array that lists files or folders you want to copy as-is when building your project. By default, the <code>src/assets/</code> folder and <code>src/favicon.ico</code> are copied over.</p><code-example language="json" ng-version="9.0.0-rc.11"><div style="display:none">"assets": [ "src/assets", "src/favicon.ico" ]</div><aio-code><pre class="lang-json prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">"assets"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
  </span><span class="str">"src/assets"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"src/favicon.ico"</span><span class="pln">
</span><span class="pun">]</span></code>
    </pre></aio-code></code-example><p translation-result="on">要排除某个资产，可以从这份资产配置中删除它。</p><p translation-origin="off">To exclude an asset, you can remove it from the assets configuration.</p><p translation-result="on">你可以通过把资产指定为对象的形式来进一步配置要复制的资产，而不仅是相对于工作空间根目录的路径。一个资产对象可以包含如下字段。</p><p translation-origin="off">You can further configure assets to be copied by specifying assets as objects, rather than as simple paths relative to the workspace root. A asset specification object can have the following fields.</p><ul><li><p translation-result="on"><code>glob</code>：一个 <a href="https://github.com/isaacs/node-glob/blob/master/README.md">node-glob</a> 它使用 <code>input</code> 作为基准目录。</p><p translation-origin="off"><code>glob</code>: A <a href="https://github.com/isaacs/node-glob/blob/master/README.md">node-glob</a> using <code>input</code> as base directory.</p></li><li><p translation-result="on"><code>input</code>：相对于工作空间根目录的路径。</p><p translation-origin="off"><code>input</code>: A path relative to the workspace root.</p></li><li><p translation-result="on"><code>output</code>：相对于 <code>outDir</code> 的路径（默认为 <code>dist/</code><em>project-name</em> ）。为了杜绝安全隐患，CLI 永远不会在项目输出路径之外写文件。</p><p translation-origin="off"><code>output</code>: A path relative to <code>outDir</code> (default is <code>dist/</code><em>project-name</em>). Because of the security implications, the CLI never writes files outside of the project output path.</p></li><li><p translation-result="on"><code>ignore</code>：要排除的 glob 列表。</p><p translation-origin="off"><code>ignore</code>: A list of globs to exclude.</p></li></ul><p translation-result="on">例如，可以使用如下对象来更详细地表达默认的资产路径。</p><p translation-origin="off">For example, the default asset paths can be represented in more detail using the following objects.</p><code-example language="json" ng-version="9.0.0-rc.11"><div style="display:none">"assets": [ { "glob": "**/*", "input": "src/assets/", "output": "/assets/" }, { "glob": "favicon.ico", "input": "src/", "output": "/" } ]</div><aio-code><pre class="lang-json prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">"assets"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
  </span><span class="pun">{</span><span class="pln"> </span><span class="str">"glob"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"**/*"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"input"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"src/assets/"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"output"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"/assets/"</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
  </span><span class="pun">{</span><span class="pln"> </span><span class="str">"glob"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"favicon.ico"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"input"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"src/"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"output"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"/"</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
</span><span class="pun">]</span></code>
    </pre></aio-code></code-example><p translation-result="on">你可以使用此扩展配置从项目外部复制资产。例如，以下配置会从 node 包中复制资产：</p><p translation-origin="off">You can use this extended configuration to copy assets from outside your project. For example, the following configuration copies assets from a node package:</p><code-example language="json" ng-version="9.0.0-rc.11"><div style="display:none">"assets": [ { "glob": "**/*", "input": "./node_modules/some-package/images", "output": "/some-package/" }, ]</div><aio-code><pre class="lang-json prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">"assets"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
 </span><span class="pun">{</span><span class="pln"> </span><span class="str">"glob"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"**/*"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"input"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"./node_modules/some-package/images"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"output"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"/some-package/"</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
</span><span class="pun">]</span></code>
    </pre></aio-code></code-example><p translation-result="on"><code>node_modules/some-package/images/</code> 中的内容将会复制到 <code>dist/some-package/</code> 中。</p><p translation-origin="off">The contents of <code>node_modules/some-package/images/</code> will be available in <code>dist/some-package/</code>.</p><p translation-result="on">下面的例子使用 <code>ignore</code> 字段排除了 assets 文件夹中的某些特定文件，防止它们被复制到 build 中：</p><p translation-origin="off">The following example uses the <code>ignore</code> field to exclude certain files in the assets folder from being copied into the build:</p><code-example language="json" ng-version="9.0.0-rc.11"><div style="display:none">"assets": [ { "glob": "**/*", "input": "src/assets/", "ignore": ["**/*.svg"], "output": "/assets/" }, ]</div><aio-code><pre class="lang-json prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">"assets"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
 </span><span class="pun">{</span><span class="pln"> </span><span class="str">"glob"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"**/*"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"input"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"src/assets/"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"ignore"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">"**/*.svg"</span><span class="pun">],</span><span class="pln"> </span><span class="str">"output"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"/assets/"</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
</span><span class="pun">]</span></code>
    </pre></aio-code></code-example><a id="style-script-config"></a><h3 id="styles-and-scripts-configuration" translation-result="on">样式和脚本配置<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#styles-and-scripts-configuration"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="styles-and-scripts-configuration">Styles and scripts configuration<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#styles-and-scripts-configuration"><i class="material-icons">link</i></a></h3><p translation-result="on"><code>styles</code> 和 <code>scripts</code> 选项的数组型条目可以是简单的路径字符串，也可以是指向额外入口点文件的对象。 其关联的构建器将在构建过程中将该文件及其依赖项作为单独的捆绑包进行加载。 对于配置对象，您可以选择使用 <code>bundleName</code> 字段为该入口点命名捆绑包。</p><p translation-origin="off">An array entry for the <code>styles</code> and <code>scripts</code> options can be a simple path string, or an object that points to an extra entry-point file. The associated builder will load that file and its dependencies as a separate bundle during the build. With a configuration object, you have the option of naming the bundle for the entry point, using a <code>bundleName</code> field.</p><p translation-result="on">默认情况下捆绑包会被注入这里，但是您可以将 <code>inject</code> 设置为 false，以将捆绑包从注入中排除。例如，以下对象值将创建并命名包含样式和脚本的包，并将其从注入中排除：</p><p translation-origin="off">The bundle is injected by default, but you can set <code>inject</code> to false to exclude the bundle from injection. For example, the following object values create and name a bundle that contains styles and scripts, and excludes it from injection:</p><code-example language="json" ng-version="9.0.0-rc.11"><div style="display:none">"styles": [ { "input": "src/external-module/styles.scss", "inject": false, "bundleName": "external-module" } ], "scripts": [ { "input": "src/external-module/main.js", "inject": false, "bundleName": "external-module" } ]</div><aio-code><pre class="lang-json prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">"styles"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
  </span><span class="pun">{</span><span class="pln"> </span><span class="str">"input"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"src/external-module/styles.scss"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"inject"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln"> </span><span class="str">"bundleName"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"external-module"</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
</span><span class="pun">],</span><span class="pln">
</span><span class="str">"scripts"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
  </span><span class="pun">{</span><span class="pln"> </span><span class="str">"input"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"src/external-module/main.js"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"inject"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln"> </span><span class="str">"bundleName"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"external-module"</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
</span><span class="pun">]</span></code>
    </pre></aio-code></code-example><p translation-result="on">您可以混合使用简单和复杂的文件引用来获取样式和脚本。</p><p translation-origin="off">You can mix simple and complex file references for styles and scripts.</p><code-example language="json" ng-version="9.0.0-rc.11"><div style="display:none">"styles": [ "src/styles.css", "src/more-styles.css", { "input": "src/lazy-style.scss", "inject": false }, { "input": "src/pre-rename-style.scss", "bundleName": "renamed-style" }, ]</div><aio-code><pre class="lang-json prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">"styles"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
  </span><span class="str">"src/styles.css"</span><span class="pun">,</span><span class="pln">
  </span><span class="str">"src/more-styles.css"</span><span class="pun">,</span><span class="pln">
  </span><span class="pun">{</span><span class="pln"> </span><span class="str">"input"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"src/lazy-style.scss"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"inject"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
  </span><span class="pun">{</span><span class="pln"> </span><span class="str">"input"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"src/pre-rename-style.scss"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"bundleName"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"renamed-style"</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
</span><span class="pun">]</span></code>
    </pre></aio-code></code-example><a id="style-preprocessor"></a><h4 id="style-preprocessor-options" translation-result="on">样式预处理器选项<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#style-preprocessor-options"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="style-preprocessor-options">Style preprocessor options<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#style-preprocessor-options"><i class="material-icons">link</i></a></h4><p translation-result="on">在 Sass 和 Stylus 中，您可以同时使用组件样式和全局样式的 <code>includePaths</code> 功能，从而可以添加将用来检查导入的额外基本路径。</p><p translation-origin="off">In Sass and Stylus you can make use of the <code>includePaths</code> functionality for both component and global styles, which allows you to add extra base paths that will be checked for imports.</p><p translation-result="on">要添加路径，请使用 <code>stylePreprocessorOptions</code> 选项：</p><p translation-origin="off">To add paths, use the <code>stylePreprocessorOptions</code> option:</p><code-example language="json" ng-version="9.0.0-rc.11"><div style="display:none">"stylePreprocessorOptions": { "includePaths": [ "src/style-paths" ] }</div><aio-code><pre class="lang-json prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">"stylePreprocessorOptions"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="str">"includePaths"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="str">"src/style-paths"</span><span class="pln">
  </span><span class="pun">]</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">该文件夹中的文件，例如 <code>src/style-paths/_variables.scss</code> ，可以从项目中的任何位置导入，而无需相对路径：</p><p translation-origin="off">Files in that folder, such as <code>src/style-paths/_variables.scss</code>, can be imported from anywhere in your project without the need for a relative path:</p><code-example language="ts" ng-version="9.0.0-rc.11"><div style="display:none">// src/app/app.component.scss // A relative path works @import '../style-paths/variables'; // But now this works as well @import 'variables';</div><aio-code><pre class="lang-ts prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="com">// src/app/app.component.scss</span><span class="pln">
</span><span class="com">// A relative path works</span><span class="pln">
</span><span class="lit">@import</span><span class="pln"> </span><span class="str">'../style-paths/variables'</span><span class="pun">;</span><span class="pln">
</span><span class="com">// But now this works as well</span><span class="pln">
</span><span class="lit">@import</span><span class="pln"> </span><span class="str">'variables'</span><span class="pun">;</span></code>
    </pre></aio-code></code-example><p translation-result="on">请注意，如果需要将其用于单元测试，则还需要将这些样式或脚本添加到 <code>test</code> 构建器。另请参阅<a href="guide/using-libraries#using-runtime-global-libraries-inside-your-app">在应用程序内部使用运行时全局库</a> 。</p><p translation-origin="off">Note that you will also need to add any styles or scripts to the <code>test</code> builder if you need them for unit tests. See also <a href="guide/using-libraries#using-runtime-global-libraries-inside-your-app">Using runtime-global libraries inside your app</a>.</p><a id="optimize-and-srcmap"></a><h3 id="optimization-and-source-map-configuration" translation-result="on">优化和 sourceMap 配置<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#optimization-and-source-map-configuration"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="optimization-and-source-map-configuration">Optimization and source map configuration<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/workspace-config#optimization-and-source-map-configuration"><i class="material-icons">link</i></a></h3><p translation-result="on"><code>optimization</code> 和 <code>sourceMap</code> 命令选项是简单的布尔标志。您可以为这些对象中的任何一个提供对象作为配置值，以提供更详细的说明。</p><p translation-origin="off">The <code>optimization</code> and <code>sourceMap</code> command options are simple Boolean flags. You can supply an object as a configuration value for either of these to provide more detailed instruction.</p><ul><li><p translation-result="on">标志 <code>--optimization="true"</code> 适用于脚本和样式。您可以提供如下值来对一个或另一个进行优化：</p><p translation-origin="off">The flag <code>--optimization="true"</code> applies to both scripts and styles. You can supply a value such as the following to apply optimization to one or the other:</p></li></ul><code-example language="json" ng-version="9.0.0-rc.11"><div style="display:none">"optimization": { "scripts": true, "styles": false }</div><aio-code><pre class="lang-json prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">"optimization"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">"scripts"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln"> </span><span class="str">"styles"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pln"> </span><span class="pun">}</span></code>
    </pre></aio-code></code-example><ul><li><p translation-result="on">标志 <code>--sourceMap="true"</code> 输出脚本和样式的源码映射。您可以配置该选项以将其应用于一个或另一个。您还可以选择输出隐藏的源码映射，或解析供应商软件包的源码映射。例如：</p><p translation-origin="off">The flag <code>--sourceMap="true"</code> outputs source maps for both scripts and styles. You can configure the option to apply to one or the other. You can also choose to output hidden source maps, or resolve vendor package source maps. For example:</p></li></ul><code-example language="json" ng-version="9.0.0-rc.11"><div style="display:none">"sourceMap": { "scripts": true, "styles": false, "hidden": true, "vendor": true }</div><aio-code><pre class="lang-json prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">"sourceMap"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">"scripts"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln"> </span><span class="str">"styles"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln"> </span><span class="str">"hidden"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln"> </span><span class="str">"vendor"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln"> </span><span class="pun">}</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><p translation-result="on">使用隐藏的源码映射时，捆绑包中不会引用源码映射。如果仅希望源映射在错误报告工具中映射错误堆栈跟踪，而又不想在浏览器开发人员工具中公开源映射，则这些选项很有用。</p><p translation-origin="off">When using hidden source maps, source maps will not be referenced in the bundle. These are useful if you only want source maps to map error stack traces in error reporting tools, but don't want to expose your source maps in the browser developer tools.</p><p translation-result="on">对于 <a href="guide/glossary#universal">Universal</a> ，可以通过将样式优化设置为 <code>true</code> 和将样式的源码映射设置为 <code>false</code> 来减少 HTML 页面中渲染的代码。</p><p translation-origin="off">For <a href="guide/glossary#universal">Universal</a>, you can reduce the code rendered in the HTML page by setting styles optimization to <code>true</code> and styles source maps to <code>false</code>.</p></div></div></div></aio-doc-viewer></main></mat-sidenav-content></mat-sidenav-container><div class="toc-container no-print ng-star-inserted"><aio-lazy-ce selector="aio-toc"><aio-toc ng-version="9.0.0-rc.11"><div class="toc-inner no-print collapsed ng-star-inserted"><ul class="toc-list"><li class="h1 ng-star-inserted active" title="Angular 工作区配置"><a href="guide/workspace-config#angular-workspace-configuration">Angular 工作区配置</a></li><li class="h2 ng-star-inserted" title="JSON 的总体结构"><a href="guide/workspace-config#overall-json-structure">JSON 的总体结构</a></li><li class="h2 ng-star-inserted" title="项目配置选项"><a href="guide/workspace-config#project-configuration-options">项目配置选项</a></li><li class="h2 ng-star-inserted" title="生成器原理图"><a href="guide/workspace-config#generation-schematics">生成器原理图</a></li><li class="h2 ng-star-inserted" title="项目工具的配置选项"><a href="guide/workspace-config#project-tool-configuration-options">项目工具的配置选项</a></li><li class="h3 ng-star-inserted" title="默认的建筑师构建器和目标"><a href="guide/workspace-config#default-architect-builders-and-targets">默认的建筑师构建器和目标</a></li><li class="h3 ng-star-inserted" title="配置构建器目标"><a href="guide/workspace-config#configuring-builder-targets">配置构建器目标</a></li><li class="h2 ng-star-inserted" title="构建目标"><a href="guide/workspace-config#build-target">构建目标</a></li><li class="h3 ng-star-inserted" title="备用的构建配置"><a href="guide/workspace-config#alternate-build-configurations">备用的构建配置</a></li><li class="h3 ng-star-inserted" title="额外的构建和测试选项"><a href="guide/workspace-config#additional-build-and-test-options">额外的构建和测试选项</a></li><li class="h2 ng-star-inserted" title="复杂配置的值"><a href="guide/workspace-config#complex-configuration-values">复杂配置的值</a></li><li class="h3 ng-star-inserted" title="项目资产（asset）配置"><a href="guide/workspace-config#assets-configuration">项目资产（asset）配置</a></li><li class="h3 ng-star-inserted" title="样式和脚本配置"><a href="guide/workspace-config#styles-and-scripts-configuration">样式和脚本配置</a></li><li class="h3 ng-star-inserted" title="优化和 sourceMap 配置"><a href="guide/workspace-config#optimization-and-source-map-configuration">优化和 sourceMap 配置</a></li></ul></div></aio-toc></aio-lazy-ce></div><footer class="no-print"><aio-footer><div class="grid-fluid"><div class="footer-block ng-star-inserted"><h3>资源</h3><ul><li class="ng-star-inserted"><a class="link" href="about" title="Angular 贡献者。">关于</a></li><li class="ng-star-inserted"><a class="link" href="resources" title="网络上的 Angular 工具、培训、博客等">资源列表</a></li><li class="ng-star-inserted"><a class="link" href="presskit" title="我们的联系方式、LOGO 和品牌">宣传资料</a></li><li class="ng-star-inserted"><a class="link" href="https://blog.angular.io/" title="Angular 官方博客">博客</a></li><li class="ng-star-inserted"><a class="link" href="analytics" title="Angular 使用情况分析">使用情况分析</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>帮助</h3><ul><li class="ng-star-inserted"><a class="link" href="https://stackoverflow.com/questions/tagged/angular" title="Stack Overflow: 这里的社区会回答你关于 Angular 的技术问题">Stack Overflow</a></li><li class="ng-star-inserted"><a class="link" href="https://gitter.im/angular/angular" title="和老鸟聊 Angular">Gitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular/issues" title="在 github 上报告问题和建议。">报告问题</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md" title="让我们彼此尊重">行为规范</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>社区</h3><ul><li class="ng-star-inserted"><a class="link" href="events" title="Angular events around the world.">活动</a></li><li class="ng-star-inserted"><a class="link" href="http://www.meetup.com/topics/angularjs/" title="参加聚会，向别的开发人员学习">聚会</a></li><li class="ng-star-inserted"><a class="link" href="https://twitter.com/angular" title="Twitter">Twitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular" title="GitHub">GitHub</a></li><li class="ng-star-inserted"><a class="link" href="contribute" title="向 Angular 做贡献">做贡献</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>多语言</h3><ul><li class="ng-star-inserted"><a class="link" href="https://angular.io/" title="English Version.">English Version</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.tw/" title="正體中文版">正體中文版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.jp/" title="日本語版">日本語版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.kr/" title="한국어">한국어</a></li></ul></div></div><p>Super-powered by Google ©2010-2020. 代码授权方式：<a href="license" title="License text">MIT-style License</a>. 文档授权方式：<a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</p><p>当前版本：9.0.1-build.109+sha.7a49faba.</p></aio-footer></footer><div class="cdk-visually-hidden ng-star-inserted"><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color" aria-hidden="true">&nbsp;</mat-icon></div></aio-shell><noscript><div class="background-sky hero"></div><section id="intro" style="text-shadow:1px 1px #1976d2"><div class="hero-logo"><img src="assets/images/logos/angular/angular.svg" width="250" height="250" alt="Angular"></div><div class="homepage-container"><div class="hero-headline">一套框架，多种平台<br>移动 &amp; 桌面</div></div></section><h2 style="color:red;margin-top:40px;position:relative;text-align:center;text-shadow:1px 1px #fafafa"><b><i>该网站需要浏览器支持 JavaScript</i></b></h2></noscript><script src="runtime-es2015.811b066977719df5af39.js" type="module"></script><script src="runtime-es5.811b066977719df5af39.js" nomodule="" defer=""></script><script src="polyfills-es5.1494ca908613f3429457.js" nomodule="" defer=""></script><script src="polyfills-es2015.9057a05c650bf60ecbf4.js" type="module"></script><script src="main-es2015.4e9aa34b562bab1382ab.js" type="module"></script><script src="main-es5.4e9aa34b562bab1382ab.js" nomodule="" defer=""></script><div class="cdk-live-announcer-element cdk-visually-hidden" aria-atomic="true" aria-live="polite"></div></body></html>